// 使用那些需要引入那些
import { reactive, onMounted, onBeforeUnmount } from 'vue';

// savePoint函数的名称可以省略，最后叫什么名称，主要看引入的人起什么名称的，这就是默认暴露的特点
export default function savePoint() {
    // function savePoint() {

    // 实现数据"打点"相关的数据
    let point = reactive({
        x: 0,
        y: 0,
    });

    // 实现鼠标“打点”相关的方法
    // 方法
    function savePoint(event) {
        point.x = event.pageX;
        point.y = event.pageY;
        console.log(event.pageX, event.pageY);
    }

    // 实现鼠标“打点”相关的生命周期钩子
    // 挂载的时候，绑定一个事件
    onMounted(() => {
        window.addEventListener('click', savePoint);
    });
    // 取消挂载之前的时候
    onBeforeUnmount(() => {
        window.removeEventListener('click', savePoint);
    });

    // 最后，需要将有用的数据进行返回才可以
    return point;
}

// 可以使用默认暴露
// export default savePoint;

// 也可以使用默认暴露的简写形式，省略写函数的名称
